<template>
	<view class="conterBox">
		<view class="contBoxOne">
			<view class="boxBaread">
				<view class="houesBox disjfa">
					<view class="BoxOneleft">logo</view>
					<view class="BoxOnecen">这里是一句广告词</view>
					<view class="BoxOnerigth">北京 <image src="../../static/image/多边形 5@2x.png"
							style="width: 26rpx;height: 10rpx;margin-left: 10rpx;"></image>
					</view>
				</view>
				<!-- 搜索 -->
				<view class="search">
					<view class="searchRight">
						<image src="../../static/image/search.png" mode="widthFix"
							style="width: 25rpx;height: 25rpx;margin: 0 15rpx;"></image>
						输入楼盘或者板块关键词
					</view>
				</view>

				<!-- 快捷导航1 -->
				<view class="navigation">
					<view class="navigatClass" v-for="(item,index) in navigaData" :key="index">
						<image :src="item.image" class="image" mode="widthFix">
							<view class="navTitle">
								{{item.name}}
							</view>
					</view>
				</view>
			</view>
		</view>
		<view class="contBoxTwo">
			<view class="tab">
				<!-- 选项卡类别列表 -->
				<view class="tab-item" v-for=" (item,index) in category" :key="index"
					:class="{'active':isActive==index}" @click="chenked(index)">
					{{item.name}}
					<image src="../../static/image/箭头下.png" class="iconImage"></image>
				</view>
				<view class="tabRightIcon">
					<image src="../../static/image/转化.png" mode="widthFix" class="iconImage"></image>
				</view>
			</view>
			<view class="tabOptionData">
				<view class="OptionItem" v-for="(item,index) in OptionData" :key="index">
					{{item.name}}
				</view>
			</view>
			<view class="houseOption disjfa" v-for=" (item,index) in housingResources" :key="index">
				<!-- <view class="relationValue "> -->
				<view class="relationIamge">
					<image :src="globalDataApi+item.house_images" class="img"></image>
				</view>
				<view class="relationText">
					<view>
						<span>{{item.name}}</span>
						<image src="../../static/image/爱心.png" class="relationImg"></image>
					</view>
					<view>
						{{item.another_name}} ｜住宅{{item.cover_area}}
					</view>
					<view>
						{{item.prices}}
					</view>
					<view>
						<span>在售</span><span>轨交房</span> <span>双阳台</span>
					</view>
					<view class="introBoot">
						<span class="introBootVal">荐</span> <span>多轨交地铁房 优质新盘</span>
					</view>
					<!-- </view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				globalDataApi: 'http://zysj.oss-cn-guangzhou.aliyuncs.com',
				navigaData: [{
						id: 1,
						name: "全部楼盘",
						image: "../../static/image/组 12114@2x.png"
					},
					{
						id: 1,
						name: "在售楼盘",
						image: "../../static/image/组 12112@2x.png"
					},
					{
						id: 1,
						name: "已开盘",
						image: "../../static/image/组 12113@2x.png"
					},
					{
						id: 1,
						name: "周边热盘",
						image: "../../static/image/组 12111@2x.png"
					}
				],
				// tab
				category: [{
						id: 1,
						name: '区域',
					},
					{
						id: 2,
						name: '价格',
					},
					{
						id: 3,
						name: '户型',
					},
					{
						id: 4,
						name: '更多',
					}
				],
				isActive: 0,
				index: 0,
				OptionData: [{
						id: 1,
						name: '最新取证',
					},
					{
						id: 2,
						name: '在售',
					},
					{
						id: 3,
						name: '日照模拟',
					},
					{
						id: 4,
						name: '视频看房',
					}
				],
				housingResources:[]
			}
		},
		onLoad() {
			this.getinit()
		},
		methods: {
			getinit() {
				this.$api('api/properties/index', 'GET').then(res => {
					this.housingResources = res.data.data
					console.log("房源数据");
				})
			},
			chenked(index) {
				this.isActive = index
			}
		}
	}
</script>

<style>
	.disjfa {
		display: flex;
		justify-content: space-between;
		flex-wrap: nowrap;
		align-items: center;
	}

	.conterBox {
		width: 750rpx;
		min-height: 100vh;
		background: #F6F6F6;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.contBoxOne {
		width: 750rpx;
		height: 370rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		background: #FFFFFF;
	}

	.boxBaread {
		width: 100%;
		height: 92rpx;
		background: #FF5500;
		margin: 0 auto;
		/* 		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 36rpx;
		color: #FFFFFF;
		font-style: normal;
		text-transform: none; */
	}

	.houesBox {
		width: 710rpx;
		height: 92rpx;
		margin: 0 auto;
	}

	.BoxOneleft {
		width: 76rpx;
		color: #FFFFFF;
	}

	.BoxOnecen {
		width: 470rpx;
		font-family: GJJCuQian-M17S, GJJCuQian-M17S;
		font-weight: 400;
		font-size: 28rpx;
		color: #FFFFFF;
		font-style: normal;
		text-transform: none;
	}

	.BoxOnerigth {
		width: 100rpx;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.contBoxTow {
		width: 100%;
		height: 220rpx;
		background-color: #FFFFFF;
	}

	.search {
		width: 694rpx;
		height: 78rpx;
		margin: 24rpx auto 30rpx;
		line-height: 78rpx;
		background: #F6F6F6;
		border-radius: 52rpx 52rpx 52rpx 52rpx;

	}

	.searchRight {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #797979;
		margin-left: 30rpx;
		text-align: left;
	}

	.navigation {
		width: 688rpx;
		/* height: 300rpx; */
		/* margin: 40rpx 0; */
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		align-items: center;
		gap: 28rpx;
	}

	.navigatClass {
		width: 96rpx;
		height: 120rpx;
		text-align: center;
	}

	.navTitle {
		margin-top: 10rpx;
		font-family: PingFangSC-Regular, PingFangSC-Regular;
		font-weight: normal;
		font-size: 24rpx;
		color: #36414D;
		line-height: 24rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.image {
		width: 80rpx;
		height: 80rpx;
	}

	.contBoxTwo {
		width: 100%;
		height: 900rpx;
		margin-top: 10rpx;
		background: #FFFFFF;
		/* border: 1rpx solid #000000; */
	}

	.tab {
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: space-around;
		flex-wrap: nowrap;
		align-items: center;
	}

	.tabOptionData {
		width: 93%;
		height: 80rpx;
		margin: 0 auto;
		display: flex;
		justify-content: left;
		flex-wrap: nowrap;
		align-items: center;
	}

	.OptionItem {
		/* width: 138rpx; */
		text-align: center;
		padding: 0 10rpx;
		height: 60rpx;
		line-height: 60rpx;
		background: #F6F7FB;
		margin-right: 24rpx;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #0F1014;
		font-style: normal;
		text-transform: none;
	}

	.iconImage {
		width: 25rpx;
		height: 23rpx;
		margin-left: 20rpx;
	}

	.iconImage:nth-child(2) {
		margin-left: 30rpx;
	}

	.tabRightIcon {
		width: 100rpx;
	}

	.tab-item {
		width: 128rpx;
		height: 36rpx;
		line-height: 38rpx;
		text-align: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #0A0A0A;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.active {
		color: #FF5500;
	}

	.houseOption {
		width: 93%;
		margin: 0 auto 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #E2E2E2;
	}

	.relationValue {
		width: 666rpx;
		height: 228rpx;
		margin: 0 auto;
	}

	.relationIamge {
		width: 234rpx;
		height: 228rpx;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
	}

	.relationText {
		width: 450rpx;
		height: 228rpx;
		margin-left: 20rpx;
		font-family: PingFang SC, PingFang SC;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.relationText view:nth-child(1) {
		font-size: 36rpx;
		color: #0F1014;
		font-style: normal;
		text-transform: none;

	}

	.relationText view:nth-child(2) {
		font-weight: 400;
		font-size: 24rpx;
		color: #0F1014;
		font-style: normal;
		text-transform: none;
		margin-bottom: 10rpx;
	}

	.relationText view:nth-child(3) {
		font-weight: 500;
		font-size: 26rpx;
		color: #FE4736;
		font-style: normal;
		text-transform: none;
		margin-bottom: 10rpx;
	}

	.relationText view:nth-child(4) {
		/* width: 62rpx; */
		/* height: 32rpx; */
		text-align: left;
		/* background: #FED2CE; */
		border-radius: 2rpx 2rpx 2rpx 2rpx;
		font-weight: 400;
		font-size: 20rpx;
		color: #6F787F;
		margin-bottom: 10rpx;
	}

	.relationText view:nth-child(4) span {
		padding: 5rpx 10rpx;
		background: #F6F7FB;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		margin-right: 10rpx;
	}

	.img {
		width: 100%;
		height: 95%;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
	}

	.introBoot {
		border: 2rpx solid #FFFFFF;
		font-family: PingFangSC-Regular, PingFangSC-Regular;
		font-size: 24rpx;
		color: #616366;
	}

	.introBootVal {
		width: 32rpx;
		height: 32rpx;
		background: #FD9011;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		font-weight: 400;
		font-size: 20rpx;
		color: #FFFFFF;
		line-height: 52rpx;
		text-align: center;
		font-style: normal;
		text-transform: none;
		margin-right: 10rpx;
	}

	.relationImg {
		width: 36rpx;
		height: 34rpx;
		float: right;
		margin-top: 10rpx;
	}
</style>
